{T}

Figma 生成设计到代码实现

Figma 作为现代产品设计和协作的核心平台，已经极大地改善了设计师与开发者的工作流。从设计理念到最终的、可交互的产品界面，中间仍然存在着信息损耗和大量重复性工作。MCP 的出现，为解决这一难题提供了一种富有前景的解决思路。它虽然还不能完全替代传统流程，但已经能在很大程度上提升特定环节的效率

  • AI 助你生成 Figma 设计稿：通过自然语言或现有网页，借助 Talk to Figma 和 HTML to Design 等 MCP 工具，在 Figma 中自动化地创建和迭代设计
  • AI 助你从设计稿生成代码

Talk to Figma

Talk to Figma 提供一套丰富的 MCP 工具集，让 Trae 具备了程序化操作 Figma 的能力：

  • 读取设计: get_document_info (获取文档信息)、get_selection (获取当前选中项)、 read_my_design (深度读取选中节点信息)
  • 创建元素: create_rectangle (创建矩形)、 create_frame (创建画框)、create_text (创建文本)
  • 修改元素: move_node (移动)、 resize_node (调整尺寸)、 set_fill_color (设置填充色)、 set_stroke_color (设置描边)
  • 高级操作: 支持自动布局（Auto Layout）、组件（Component）创建与实例化、原型（Prototyping）连接等

使用步骤

整个过程分为三大步：准备本地项目、安装并设置 Figma、在 Trae 中配置 MCP 服务。

第一步：准备项目和环境

1. 拉取项目：需要将 cursor-talk-to-figma-mcp 的代码库克隆到本地

bash
git clone git@github.com:sonnylazuardi/cursor-talk-to-figma-mcp.git

注意：项目中的 src/cursor_mcp_plugin/manifest.json 文件至关重要，稍后在 Figma 中导入插件时会用到它

2. 安装 Bun: Talk to Figma 项目使用 Bun 作为 JavaScript 运行环境和包管理器。需要先安装它

bash
curl -fsSL https://bun.sh/install | bash

# 上面安装失败，使用 brew 安装
brew tap oven-sh/bun && brew install bun

bun --version

在安装过程中遇到任何问题，可以直接在 Trae 中提问，让 AI 帮你解决

3. 理解核心服务：项目主要包含两个服务。

  • bun socket: 启动一个 WebSocket 服务，用于在 Figma 插件和 MCP 服务之间建立通信桥梁。启动后会显示如下所示，监听在 3055 端口。
  • bunx cursor-talk-to-figma-mcp: 启动实际的 MCP 服务 请注意：不需要手动执行 bunx cursor-talk-to-figma-mcp 命令。Trae 会根据配置文件自动为启动和管理这个服务。只需要理解它的作用即可

第二步：安装和设置 Figma 桌面端

1. 下载并安装 Figma: 打开 Figma 下载页面

2. 创建项目和页面: 打开 Figma 桌面应用并登录。免费用户可以创建一个包含三个页面的项目。点击“+”号创建一个新项目，并进入项目，至少创建一个页面

3. 导入本地插件: 这是连接 Figma 和本地代码的关键一步。在项目页面中，按照下图在 Plugins & widgets 中打开 Import from manifest... 打开插件导入对话框。然后，选中第一步拉取的项目中的 src/cursor_mcp_plugin/manifest.json 文件

第三步：连接 Figma 与 Trae

1. 在 Figma 中启动并连接插件

bash
# 启动项目
bunx cursor-talk-to-figma-mcp

导入插件后，在 Figma 中运行它。在弹出的 “Cursor Talk To Figma Plugin” 窗口中点击 “Connect” 按钮。并随机生成 Trae 连接到本次 Figma 会话的唯一凭证

2. 在 Trae 中配置连接

回到 Trae，打开 MCP 服务管理界面。点击右上角的“+添加”，选择“手动配置”。将从 Figma 插件窗口中看到的 JSON 配置粘贴进去，并确认

json
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": [
        "cursor-talk-to-figma-mcp@latest"
      ]
    }
  }
}

打开新的 Trae 会话窗口，输入指令来连接到指定的 Figma 频道，请将 fcitxdm2 替换为你自己获取到的频道 ID：

nginx
链接到 Figma，频道 mtfobv4b

当 Trae 调用 TalkToFigma/join_channel 工具并成功返回时，就代表 Trae 已经和你的 Figma 画布成功连接

案例：生成健康饮食 App

markdown
你是一位资深的UI/UX设计专家，拥有超过10年的移动应用设计经验，专精于健康生活类应用的用户体验设计。深谙用户心理学、视觉设计原理和移动端交互设计最佳实践

## 设计任务
请设计一款以"健康饮食"为主题的移动应用原型图。

## 设计要求

### 核心功能模块
1. **营养记录** - 用户可以记录每日饮食摄入
2. **健康分析** - 提供营养成分分析和健康建议
3. **食谱推荐** - 基于用户偏好和健康目标推荐食谱
4. **目标管理** - 设定和追踪健康饮食目标
5. **社区互动** - 用户分享和交流健康饮食心得

### 设计原则
- **简洁直观**：界面清晰，操作流程简单易懂
- **视觉舒适**：采用温暖、自然的色彩搭配，体现健康理念
- **数据可视化**：用图表等方式直观展示营养数据和进度
- **个性化体验**：根据用户习惯和偏好定制界面和内容
- **激励机制**：通过成就系统和进度展示激励用户坚持

### 目标用户
- 关注健康饮食的年轻白领（25-40岁）
- 有减重或增肌需求的健身爱好者
- 需要饮食管理的慢性病患者
- 追求生活品质的中产阶级

### 设计输出要求
1. **主要页面设计**：首页、记录页、分析页、食谱页、个人中心
2. **关键交互流程**：用户注册/登录、添加饮食记录、查看分析报告
3. **视觉风格指南**：色彩方案、字体选择、图标风格、组件规范
4. **响应式考虑**：适配不同屏幕尺寸的移动设备

### 创新点建议
- 集成AI营养师功能，提供个性化建议
- 支持拍照识别食物和自动记录营养信息
- 结合可穿戴设备数据，提供更全面的健康分析
- 游戏化元素，让健康饮食变得有趣

请基于以上要求，运用你的专业知识和丰富经验，设计出既美观又实用的健康饮食App原型图。注重用户体验的每一个细节，确保设计能够真正帮助用户养成健康的饮食习惯。

生成过程：

整个生成过程是全自动的，但可能因为设计复杂而耗时较长。AI 会像设计师一样思考，一步步创建框架、添加元素、调整样式。

迭代与优化：

AI 完成的初版设计稿如下所示。虽然整体框架已经搭建完成，但在细节上，如对齐、背景色、图标文字等方面还存在一些不协调之处

这正是 AI 协作的魅力所在。我们可以像和真人设计师沟通一样，通过截图和自然语言指出问题，让 AI 进行优化。例如，针对底部导航栏的布局问题，我们可以提出具体的修改意见。

经过几轮快速的迭代优化后，我们得到了一个相对协调的最终版本。

案例充分展示 Trae 结合 Talk to Figma MCP 的强大能力：它能够完成从零开始创造复杂的设计，但是实现的效果还存在一些不协调之处。对生产级别来说，还不能达到预期的效果。好处是借助 AI 让从来没用过 Figma 的人可以也可快速的搭建出设计稿，然后通过截图和自然语言指出问题，让 AI 进行优化，或者直接在 Figma 中进行调整

生成 HTML 原型

依然使用“健康饮食 App”的提示词，这次让 Trae 先为生成一个高质量的 HTML 页面原型

markdown
你是一位资深的UI/UX设计专家，拥有超过10年的移动应用设计经验，专精于健康生活类应用的用户体验设计。深谙用户心理学、视觉设计原理和移动端交互设计最佳实践。生成高质量的 HTML 页面原型

## 设计任务
请设计一款以"健康饮食"为主题的移动应用原型图。

## 设计要求

### 核心功能模块
1. **营养记录** - 用户可以记录每日饮食摄入
2. **健康分析** - 提供营养成分分析和健康建议
3. **食谱推荐** - 基于用户偏好和健康目标推荐食谱
4. **目标管理** - 设定和追踪健康饮食目标
5. **社区互动** - 用户分享和交流健康饮食心得

### 设计原则
- **简洁直观**：界面清晰，操作流程简单易懂
- **视觉舒适**：采用温暖、自然的色彩搭配，体现健康理念
- **数据可视化**：用图表等方式直观展示营养数据和进度
- **个性化体验**：根据用户习惯和偏好定制界面和内容
- **激励机制**：通过成就系统和进度展示激励用户坚持

### 目标用户
- 关注健康饮食的年轻白领（25-40岁）
- 有减重或增肌需求的健身爱好者
- 需要饮食管理的慢性病患者
- 追求生活品质的中产阶级

### 设计输出要求
1. **主要页面设计**：首页、记录页、分析页、食谱页、个人中心
2. **关键交互流程**：用户注册/登录、添加饮食记录、查看分析报告
3. **视觉风格指南**：色彩方案、字体选择、图标风格、组件规范
4. **响应式考虑**：适配不同屏幕尺寸的移动设备

### 创新点建议
- 集成AI营养师功能，提供个性化建议
- 支持拍照识别食物和自动记录营养信息
- 结合可穿戴设备数据，提供更全面的健康分析
- 游戏化元素，让健康饮食变得有趣

请基于以上要求，运用你的专业知识和丰富经验，设计出既美观又实用的健康饮食App原型图。注重用户体验的每一个细节，确保设计能够真正帮助用户养成健康的饮食习惯。

Trae 生成的 HTML 页面在视觉和结构上都表现得相当出色，为一个高保真的设计转换打下了坚实的基础。

社区方案的探索：Figma Context MCP

社区开发者们也在积极探索解决方案，Figma Context MCP 就是其中的一个代表。这类工具的目标是读取 Figma 设计稿的上下文信息，并尝试生成可以直接使用的前端代码

Figma Context MCP 的核心思想是“精确制导”。不再是让 AI “看着整个屏幕”去猜测，而是通过复制指向特定图层、组件或画框的链接，为 AI 提供精准的上下文。MCP 服务会解析这个链接，获取该选区所有详细的设计数据（包括层级、样式、布局、字体、颜色等），并将其以结构化的形式提供给 Trae，从而生成代码

详细使用步骤

第一步：获取 Figma 个人访问令牌 (Personal Access Token)

为了让外部工具能够安全地读取你的 Figma 文件，你需要先生成一个个人访问令牌

  1. 在 Figma 主页，点击左上角的头像，在下拉菜单中选择 Settings
  2. 在设置弹窗中，切换到 Security 标签页，在 Personal access tokens 区域点击 Generate new token
  3. 为令牌命名（例如 “Trae-MCP”），并确保在 Scopes（权限范围）中，为 File content 和 Dev resources 至少授予只读权限。然后点击 Generate token（这里我全部授权了）
  4. 重要提示：请立即复制并妥善保管新生成的令牌，因为出于安全考虑，这个令牌值在关闭窗口后将无法再次查看
nginx
figd_hoKqqQHjmSqGddhDq0fy6w6u4xh6DgYVl7kug-FB
figd_hoKqqQHjmSqGddhDq0fy6w6u4xh6DgYVl7kug-FB

第二步：在 Trae 中配置 MCP 服务

  1. 在 Trae 的 MCP 管理界面，搜索 “Figma”。
  2. 在搜索结果中找到 Figma AI Bridge（一个实现了该功能的常用 MCP），点击配置
  3. 在配置窗口中，将上一步复制的 Figma 个人访问令牌粘贴进去，然后点击确认即可

Figma AI Bridge 这里安装失败，换了 Cursor 还是不可以

第三步：从设计稿生成代码

  1. 复制特定选区链接：回到 Figma 设计稿，右键点击想要生成代码的画框或图层，选择 Copy/Paste as -> Copy link to selection。这个操作可以为 AI 提供一个精确的目标，避免处理不相关的信息

  2. 向 Trae 发起生成请求：打开 Trae 聊天窗口，输入你的要求，并附上刚刚复制的链接。例如：

    nginx
    请根据我提供的 Figma 设计稿，使用 HTML 完成页面开发，请你严格按照 Figma 设计稿的内容进行开发，不要自己随意加入内容

https://www.figma.com/design/DNH5uM8IZOV8FHQZ9SG1Gr/Untitled?node-id=1-2&t=H04Pc1vWzKOJFFUS-4

效果与结论

Trae 会调用配置好的 MCP 服务，解析设计稿链接并生成代码。从最终的生成结果来看，目前通过这类社区 MCP 实现的代码转换，还难以达到 1:1 还原，但整体的布局、颜色和结构都非常接近。

这种方式非常适合为开发提供一个良好的“起点”。当你的选区越小、越聚焦于一个具体的组件时，生成代码的准确度也越高

官方出品：Figma Dev Mode MCP

除了社区方案，Figma 官方也推出了自己的 Dev Mode MCP Server。它的定位更侧重于将 Figma 的开发者模式（Dev Mode）中的精确设计规范，以协议的方式提供给 AI

核心理念与功能：

官方 MCP 的核心目标不是一键生成完整页面，而是将 Figma 作为设计规范的“单一事实来源”。它允许开发者在 Trae 中直接查询和获取与 Figma Dev Mode 完全一致的设计信息，例如：

  • 获取精确的设计 Token（如颜色、间距等变量）
  • 为选定的组件生成对应的代码片段（支持 CSS、SwiftUI、XML 等）
  • 读取组件的详细属性和布局信息

重要说明：

根据官方文档，此功能目前仍处于 Beta 测试阶段，且仅对付费的 Professional、Organization 或 Enterprise 订阅计划用户开放。因此对于免费用户来说，暂时还无法体验到这一官方集成。它的主要价值在于为使用付费计划的团队提供一个高度精准、与设计系统强绑定的开发辅助工具